<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件对象三大属性之一state</title>
</head>
<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    // 1.类式组件
  class Weather extends React.Component {
    // 初始化state
    state = {isHot: false, wind: '微风'}

    render() {
      return <h2 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'},{this.state.wind}</h2>
    }
    // =赋值表示changeWeather是实例方法
    changeWeather = () => {
      this.setState({isHot: !this.state.isHot})
    }
   }
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'))
  </script>
</body>
</html>